rendernodeparser: Allow parsing strings

Instead of only allowing for glyph indexes, allow ASCII characters as
replacements. So this glyph sequence
  glyphs: 65 8, 66 8, 67 8
Can be replaced by
  glyphs: "ABC"
provided that the glyph for "A", "B" and "C" are 65, 66 and 67
respectively and their advance is exactly 8.
x offset and y offset must always be 0 and every glyph must start a
cluster.

diff --git a/gsk/gskrendernode.h b/gsk/gskrendernode.h
index 1c82f2cf136a5e4019a27b931da8ff584e9a05a5..cdb59a46f4db6850f8d98ea9e8a2bf0834da81ff 100644 (file)
--- a/gsk/gskrendernode.h
+++ b/gsk/gskrendernode.h
@@ -294,7 +294,7 @@ GskRenderNode *         gsk_text_node_new                       (PangoFont
                                                                  const GdkRGBA            *color,
                                                                  const graphene_point_t   *offset);
 GDK_AVAILABLE_IN_ALL
-const PangoFont *       gsk_text_node_peek_font                 (GskRenderNode            *node);
+PangoFont *             gsk_text_node_peek_font                 (GskRenderNode            *node);
 GDK_AVAILABLE_IN_ALL
 guint                   gsk_text_node_get_num_glyphs            (GskRenderNode            *node);
 GDK_AVAILABLE_IN_ALL

diff --git a/gsk/gskrendernodeimpl.c b/gsk/gskrendernodeimpl.c
index a2082dc32693c234c892e0e173936c2e22f5d8bf..596e6da006e10bbd933afe8c1d86071241fde77f 100644 (file)
--- a/gsk/gskrendernodeimpl.c
+++ b/gsk/gskrendernodeimpl.c
@@ -3572,7 +3572,7 @@ gsk_text_node_peek_color (GskRenderNode *node)
   return &self->color;
 }
 
-const PangoFont *
+PangoFont *
 gsk_text_node_peek_font (GskRenderNode *node)
 {
   GskTextNode *self = (GskTextNode *) node;

diff --git a/gsk/gskrendernodeparser.c b/gsk/gskrendernodeparser.c
index 8b4c74a601600f28065881f56e44e24cb346a0a9..ab7b3bd2a8fe47d64266a27db0378a1ccbb03035 100644 (file)
--- a/gsk/gskrendernodeparser.c
+++ b/gsk/gskrendernodeparser.c
@@ -501,6 +501,62 @@ font_from_string (const char *string)
   return font;
 }
 
+#define MIN_ASCII_GLYPH 32
+#define MAX_ASCII_GLYPH 127 /* exclusive */
+#define N_ASCII_GLYPHS (MAX_ASCII_GLYPH - MIN_ASCII_GLYPH)
+
+static PangoGlyphString *
+create_ascii_glyphs (PangoFont *font)
+{
+  PangoLanguage *language = pango_language_from_string ("en_US"); /* just pick one */
+  PangoCoverage *coverage;
+  PangoAnalysis not_a_hack = {
+    .shape_engine = pango_font_find_shaper (font, language, MIN_ASCII_GLYPH), /* never changes */
+    .lang_engine = NULL, /* unused by pango_shape() */
+    .font = font,
+    .level = 0,
+    .gravity = PANGO_GRAVITY_SOUTH,
+    .flags = 0,
+    .script = PANGO_SCRIPT_COMMON,
+    .language = language,
+    .extra_attrs = NULL
+  };
+  PangoGlyphString *result, *glyph_string;
+  guint i;
+
+  coverage = pango_font_get_coverage (font, language);
+  for (i = MIN_ASCII_GLYPH; i < MAX_ASCII_GLYPH; i++)
+    {
+      if (!pango_coverage_get (coverage, i))
+        break;
+    }
+  pango_coverage_unref (coverage);
+  if (i < MAX_ASCII_GLYPH)
+    return NULL;
+
+  result = pango_glyph_string_new ();
+  pango_glyph_string_set_size (result, N_ASCII_GLYPHS);
+  glyph_string = pango_glyph_string_new ();
+  for (i = MIN_ASCII_GLYPH; i < MAX_ASCII_GLYPH; i++)
+    {
+      pango_shape ((char[2]) { i, 0 },
+                   1,
+                   &not_a_hack,
+                   glyph_string);
+      if (glyph_string->num_glyphs != 1)
+        {
+          pango_glyph_string_free (glyph_string);
+          pango_glyph_string_free (result);
+          return NULL;
+        }
+      result->glyphs[i - MIN_ASCII_GLYPH] = glyph_string->glyphs[0];
+    }
+
+  pango_glyph_string_free (glyph_string);
+
+  return result;
+}
+
 static gboolean
 parse_font (GtkCssParser *parser,
             gpointer      out_font)
@@ -546,34 +602,52 @@ parse_glyphs (GtkCssParser *parser,
       double d, d2;
       int i;
 
-      if (!gtk_css_parser_consume_integer (parser, &i) ||
-          !gtk_css_parser_consume_number (parser, &d))
+      if (gtk_css_parser_has_token (parser, GTK_CSS_TOKEN_STRING))
         {
-          pango_glyph_string_free (glyph_string);
-          return FALSE;
-        }
-      gi.glyph = i;
-      gi.geometry.width = (int) (d * PANGO_SCALE);
+          char *s = gtk_css_parser_consume_string (parser);
 
-      if (gtk_css_parser_has_number (parser))
+          for (i = 0; s[i] != 0; i++)
+            {
+              if (s[i] < MIN_ASCII_GLYPH || s[i] >= MAX_ASCII_GLYPH)
+                {
+                  gtk_css_parser_error_value (parser, "Unsupported character %d in string", i);
+                }
+              gi.glyph = PANGO_GLYPH_INVALID_INPUT - MAX_ASCII_GLYPH + s[i];
+              pango_glyph_string_set_size (glyph_string, glyph_string->num_glyphs + 1);
+              glyph_string->glyphs[glyph_string->num_glyphs - 1] = gi;
+            }
+        }
+      else
         {
-          if (!gtk_css_parser_consume_number (parser, &d) ||
-              !gtk_css_parser_consume_number (parser, &d2))
+          if (!gtk_css_parser_consume_integer (parser, &i) ||
+              !gtk_css_parser_consume_number (parser, &d))
             {
               pango_glyph_string_free (glyph_string);
               return FALSE;
             }
-          gi.geometry.x_offset = (int) (d * PANGO_SCALE);
-          gi.geometry.y_offset = (int) (d2 * PANGO_SCALE);
+          gi.glyph = i;
+          gi.geometry.width = (int) (d * PANGO_SCALE);
 
-          if (gtk_css_parser_try_ident (parser, "same-cluster"))
-            gi.attr.is_cluster_start = 0;
-          else
-            gi.attr.is_cluster_start = 1;
-        }
+          if (gtk_css_parser_has_number (parser))
+            {
+              if (!gtk_css_parser_consume_number (parser, &d) ||
+                  !gtk_css_parser_consume_number (parser, &d2))
+                {
+                  pango_glyph_string_free (glyph_string);
+                  return FALSE;
+                }
+              gi.geometry.x_offset = (int) (d * PANGO_SCALE);
+              gi.geometry.y_offset = (int) (d2 * PANGO_SCALE);
 
-      pango_glyph_string_set_size (glyph_string, glyph_string->num_glyphs + 1);
-      glyph_string->glyphs[glyph_string->num_glyphs - 1] = gi;
+              if (gtk_css_parser_try_ident (parser, "same-cluster"))
+                gi.attr.is_cluster_start = 0;
+              else
+                gi.attr.is_cluster_start = 1;
+            }
+
+          pango_glyph_string_set_size (glyph_string, glyph_string->num_glyphs + 1);
+          glyph_string->glyphs[glyph_string->num_glyphs - 1] = gi;
+        }
     }
   while (gtk_css_parser_try_token (parser, GTK_CSS_TOKEN_COMMA));
 
@@ -1009,6 +1083,39 @@ parse_repeat_node (GtkCssParser *parser)
   return result;
 }
 
+static gboolean
+unpack_glyphs (PangoFont        *font,
+               PangoGlyphString *glyphs)
+{
+  PangoGlyphString *ascii = NULL;
+  guint i;
+
+  for (i = 0; i < glyphs->num_glyphs; i++)
+    {
+      PangoGlyph glyph = glyphs->glyphs[i].glyph;
+
+      if (glyph < PANGO_GLYPH_INVALID_INPUT - MAX_ASCII_GLYPH ||
+          glyph >= PANGO_GLYPH_INVALID_INPUT)
+        continue;
+
+      glyph = glyph - (PANGO_GLYPH_INVALID_INPUT - MAX_ASCII_GLYPH) - MIN_ASCII_GLYPH;
+
+      if (ascii == NULL)
+        {
+          ascii = create_ascii_glyphs (font);
+          if (ascii == NULL)
+            return FALSE;
+        }
+
+      glyphs->glyphs[i].glyph = ascii->glyphs[glyph].glyph;
+      glyphs->glyphs[i].geometry.width = ascii->glyphs[glyph].geometry.width;
+    }
+
+  g_clear_pointer (&ascii, pango_glyph_string_free);
+
+  return TRUE;
+}
+
 static GskRenderNode *
 parse_text_node (GtkCssParser *parser)
 {
@@ -1033,13 +1140,41 @@ parse_text_node (GtkCssParser *parser)
     }
 
   if (!glyphs)
-    return NULL;
+    {
+      const char *text = "Hello";
+      PangoGlyphInfo gi = { 0, { 0, 0, 0}, { 1 } };
+      guint i;
 
-  result = gsk_text_node_new (font, glyphs, &color, &offset);
+      glyphs = pango_glyph_string_new ();
+      pango_glyph_string_set_size (glyphs, strlen (text));
+      for (i = 0; i < strlen (text); i++)
+        {
+          gi.glyph = PANGO_GLYPH_INVALID_INPUT - MAX_ASCII_GLYPH + text[i];
+          glyphs->glyphs[i] = gi;
+        }
+    }
+
+  if (!unpack_glyphs (font, glyphs))
+    {
+      gtk_css_parser_error_value (parser, "Given font cannot decode the glyph text");
+      result = NULL;
+    }
+  else
+    {
+      result = gsk_text_node_new (font, glyphs, &color, &offset);
+      if (result == NULL)
+        {
+          gtk_css_parser_error_value (parser, "Glyphs result in empty text");
+        }
+    }
 
   g_object_unref (font);
   pango_glyph_string_free (glyphs);
 
+  /* return anything, whatever, just not NULL */
+  if (result == NULL)
+    result = create_default_render_node ();
+
   return result;
 }
 
@@ -1872,27 +2007,56 @@ render_node_print (Printer       *p,
         const PangoGlyphInfo *glyphs = gsk_text_node_peek_glyphs (node);
         const graphene_point_t *offset = gsk_text_node_get_offset (node);
         const GdkRGBA *color = gsk_text_node_peek_color (node);
+        PangoFont *font = gsk_text_node_peek_font (node);
         PangoFontDescription *desc;
         char *font_name;
-        guint i;
+        GString *str;
+        guint i, j;
+        PangoGlyphString *ascii = create_ascii_glyphs (font);
+
         start_node (p, "text");
 
         if (!gdk_rgba_equal (color, &GDK_RGBA("000000")))
           append_rgba_param (p, "color", color);
 
         _indent (p);
-        desc = pango_font_describe ((PangoFont *)gsk_text_node_peek_font (node));;
+        desc = pango_font_describe (font);
         font_name = pango_font_description_to_string (desc);
+        if (ascii == NULL)
+          g_print ("\"%s\" has no ascii table\n", font_name);
         g_string_append_printf (p->str, "font: \"%s\";\n", font_name);
         g_free (font_name);
         pango_font_description_free (desc);
 
         _indent (p);
+        str = g_string_new (NULL);
         g_string_append (p->str, "glyphs: ");
         for (i = 0; i < n_glyphs; i++)
           {
-            if (i > 0)
-              g_string_append (p->str, ", ");
+            if (ascii)
+              {
+                for (j = 0; j < ascii->num_glyphs; j++)
+                  {
+                    if (glyphs[i].glyph == ascii->glyphs[j].glyph &&
+                        glyphs[i].geometry.width == ascii->glyphs[j].geometry.width &&
+                        glyphs[i].geometry.x_offset == 0 &&
+                        glyphs[i].geometry.x_offset == 0 &&
+                        glyphs[i].attr.is_cluster_start)
+                      {
+                        g_string_append_c (str, j + MIN_ASCII_GLYPH);
+                        break;
+                      }
+                  }
+                if (j != ascii->num_glyphs)
+                  continue;
+              }
+
+            if (str->len)
+              {
+                g_string_append_printf (p->str, "\"%s\", ", str->str);
+                g_string_set_size (str, 0);
+              }
+
             g_string_append_printf (p->str, "%u %g",
                                     glyphs[i].glyph,
                                     (double) glyphs[i].geometry.width / PANGO_SCALE);
@@ -1906,7 +2070,14 @@ render_node_print (Printer       *p,
               if (!glyphs[i].attr.is_cluster_start)
                 g_string_append (p->str, " same-cluster");
             }
+
+            if (i + 1 < n_glyphs)
+              g_string_append (p->str, ", ");
           }
+
+        if (str->len)
+          g_string_append_printf (p->str, "\"%s\"", str->str);
+
         g_string_append_c (p->str, ';');
         g_string_append_c (p->str, '\n');
 
@@ -1914,6 +2085,10 @@ render_node_print (Printer       *p,
           append_point_param (p, "offset", offset);
 
         end_node (p);
+
+        g_string_free (str, TRUE);
+        if (ascii)
+          pango_glyph_string_free (ascii);
       }
       break;
 

diff --git a/testsuite/gsk/serializedeserialize/testswitch.node b/testsuite/gsk/serializedeserialize/testswitch.node
index eb529b703b539bd5f547479244dcce53b2d5db22..89d884bcdab5cefe761680a55e5ecdcf1696b167 100644 (file)
--- a/testsuite/gsk/serializedeserialize/testswitch.node
+++ b/testsuite/gsk/serializedeserialize/testswitch.node
@@ -59,7 +59,7 @@ transform {
           child: text {
             color: rgb(46,52,54);
             font: "Cantarell 11";
-            glyphs: 37 11, 324 4, 417 7, 244 8, 272 8, 349 4, 287 8, 280 8;
+            glyphs: "Disabled";
             offset: 145 18;
           }
           transform: translate(56, 0);
@@ -139,7 +139,7 @@ transform {
             child: text {
               color: rgb(46,52,54);
               font: "Cantarell 11";
-              glyphs: 45 9, 360 8, 244 8, 272 8, 349 4, 287 8, 280 8;
+              glyphs: "Enabled";
               offset: 147 18;
             }
             transform: translate(56, 0);
@@ -182,7 +182,7 @@ transform {
             child: text {
               color: rgb(46,52,54);
               font: "Cantarell 11";
-              glyphs: 37 11, 324 4, 417 7, 244 8, 272 8, 349 4, 287 8, 280 8;
+              glyphs: "Disabled";
               offset: 145 18;
             }
             transform: translate(56, 0);
@@ -228,7 +228,7 @@ transform {
             child: text {
               color: rgb(46,52,54);
               font: "Cantarell 11";
-              glyphs: 45 9, 360 8, 244 8, 272 8, 349 4, 287 8, 280 8;
+              glyphs: "Enabled";
               offset: 147 18;
             }
             transform: translate(56, 0);
@@ -291,7 +291,7 @@ transform {
             child: text {
               color: rgb(46,52,54);
               font: "Cantarell 11";
-              glyphs: 37 11, 324 4, 417 7, 244 8, 272 8, 349 4, 287 8, 280 8;
+              glyphs: "Disabled";
               offset: 123 18;
             }
             transform: translate(78, 0);

diff --git a/testsuite/gsk/serializedeserialize/widgetfactory.node b/testsuite/gsk/serializedeserialize/widgetfactory.node
index a8b36b42e289b5f4be560c42ff60b641a5df303b..36b5f1b3288a2ca1aa16507c18f9bbf25c148382 100644 (file)
--- a/testsuite/gsk/serializedeserialize/widgetfactory.node
+++ b/testsuite/gsk/serializedeserialize/widgetfactory.node
@@ -75,7 +75,7 @@ transform {
                   child: text {
                     color: rgb(46,52,54);
                     font: "Cantarell 11";
-                    glyphs: 162 9, 244 8, 312 8, 287 8, 862 3, 678 7;
+                    glyphs: "Page 1";
                     offset: 0 17;
                   }
                   transform: translate(28, 0);
@@ -98,7 +98,7 @@ transform {
                   child: text {
                     color: rgb(46,52,54);
                     font: "Cantarell 11";
-                    glyphs: 162 9, 244 8, 312 8, 287 8, 862 3, 679 8;
+                    glyphs: "Page 2";
                     offset: 0 17;
                   }
                   transform: translate(28, 0);
@@ -123,7 +123,7 @@ transform {
                   child: text {
                     color: rgb(46,52,54);
                     font: "Cantarell 11";
-                    glyphs: 162 9, 244 8, 312 8, 287 8, 862 3, 680 8;
+                    glyphs: "Page 3";
                     offset: 0 17;
                   }
                   transform: translate(28, 0);
@@ -199,7 +199,7 @@ transform {
                       text {
                         color: rgb(50,50,50);
                         font: "Cantarell 11";
-                        glyphs: 273 7, 370 8, 358 13, 272 8, 370 8, 272 8, 370 8, 472 7, 287 8, 360 8, 430 5, 409 6, 473 7;
+                        glyphs: "comboboxentry";
                         offset: 0 21;
                       }
                       clip {
@@ -211,7 +211,7 @@ transform {
                           text {
                             color: rgb(252,252,252);
                             font: "Cantarell 11";
-                            glyphs: 273 7, 370 8, 358 13, 272 8, 370 8, 272 8, 370 8, 472 7, 287 8, 360 8, 430 5, 409 6, 473 7;
+                            glyphs: "comboboxentry";
                             offset: 0 21;
                           }
                         }
@@ -268,7 +268,7 @@ transform {
                       child: text {
                         color: rgb(212,207,202);
                         font: "Cantarell 11";
-                        glyphs: 273 7, 370 8, 358 13, 272 8, 370 8, 272 8, 370 8, 472 7, 287 8, 360 8, 430 5, 409 6, 473 7;
+                        glyphs: "comboboxentry";
                         offset: 0 21;
                       }
                       clip: 0 0 357 32;
@@ -321,7 +321,7 @@ transform {
                     child: text {
                       color: rgb(50,50,50);
                       font: "Cantarell 11";
-                      glyphs: 30 10, 349 4, 324 4, 273 7, 345 7, 862 3, 324 4, 273 7, 370 8, 360 8, 862 3, 430 5, 370 8, 862 3, 273 7, 319 8, 244 8, 360 8, 312 8, 287 8, 862 3, 358 13, 370 8, 280 8, 287 8;
+                      glyphs: "Click icon to change mode";
                       offset: 0 21;
                     }
                     opacity: 0.54902;
@@ -359,7 +359,7 @@ transform {
                   child: text {
                     color: rgb(212,207,202);
                     font: "Cantarell 11";
-                    glyphs: 287 8, 360 8, 430 5, 409 6, 473 7;
+                    glyphs: "entry";
                     offset: 0 21;
                   }
                   clip: 0 0 392 32;
@@ -387,7 +387,7 @@ transform {
                       child: text {
                         color: rgb(50,50,50);
                         font: "Cantarell 11";
-                        glyphs: 287 8, 360 8, 430 5, 409 6, 473 7;
+                        glyphs: "entry";
                         offset: 0 22;
                       }
                       clip: 0 0 357 33;
@@ -442,7 +442,7 @@ transform {
                       text {
                         color: rgb(146,149,149);
                         font: "Cantarell 11";
-                        glyphs: 103 8, 287 8, 311 5, 430 5;
+                        glyphs: "Left";
                         offset: 2 17;
                       }
                       transform {
@@ -476,7 +476,7 @@ transform {
                         text {
                           color: rgb(146,149,149);
                           font: "Cantarell 11";
-                          glyphs: 113 13, 324 4, 280 8, 280 8, 349 4, 287 8;
+                          glyphs: "Middle";
                           offset: 2 17;
                         }
                         transform {
@@ -514,7 +514,7 @@ transform {
                         text {
                           color: rgb(146,149,149);
                           font: "Cantarell 11";
-                          glyphs: 165 9, 324 4, 312 8, 319 8, 430 5;
+                          glyphs: "Right";
                           offset: 2 17;
                         }
                         transform {
@@ -542,14 +542,14 @@ transform {
                 text {
                   color: rgb(146,149,149);
                   font: "Cantarell 11";
-                  glyphs: 349 4, 244 8, 272 8, 287 8, 349 4;
+                  glyphs: "label";
                   offset: 0 22;
                 }
                 transform {
                   child: text {
                     color: rgb(212,207,202);
                     font: "Cantarell 11";
-                    glyphs: 349 4, 244 8, 272 8, 287 8, 349 4;
+                    glyphs: "label";
                     offset: 0 22;
                   }
                   transform: translate(52, 0);
@@ -572,7 +572,7 @@ transform {
                         child: text {
                           color: rgb(50,50,50);
                           font: "Cantarell 11";
-                          glyphs: 682 8, 677 9;
+                          glyphs: "50";
                           offset: 0 15;
                         }
                         transform: translate(6, 6);
@@ -635,7 +635,7 @@ transform {
                         child: text {
                           color: rgb(212,207,202);
                           font: "Cantarell 11";
-                          glyphs: 677 9;
+                          glyphs: "0";
                           offset: 0 15;
                         }
                         transform: translate(6, 6);
@@ -723,7 +723,7 @@ transform {
                       child: text {
                         color: rgb(146,149,149);
                         font: "Cantarell 11";
-                        glyphs: 273 7, 319 8, 287 8, 273 7, 345 7, 272 8, 438 8, 430 5, 430 5, 370 8, 360 8;
+                        glyphs: "checkbutton";
                         offset: 0 15;
                       }
                       transform: translate(24, 0);
@@ -750,7 +750,7 @@ transform {
                       child: text {
                         color: rgb(146,149,149);
                         font: "Cantarell 11";
-                        glyphs: 273 7, 319 8, 287 8, 273 7, 345 7, 272 8, 438 8, 430 5, 430 5, 370 8, 360 8;
+                        glyphs: "checkbutton";
                         offset: 0 15;
                       }
                       transform: translate(24, 0);
@@ -785,7 +785,7 @@ transform {
                       child: text {
                         color: rgb(146,149,149);
                         font: "Cantarell 11";
-                        glyphs: 273 7, 319 8, 287 8, 273 7, 345 7, 272 8, 438 8, 430 5, 430 5, 370 8, 360 8;
+                        glyphs: "checkbutton";
                         offset: 0 15;
                       }
                       transform: translate(24, 0);
@@ -820,7 +820,7 @@ transform {
                       child: text {
                         color: rgb(212,207,202);
                         font: "Cantarell 11";
-                        glyphs: 273 7, 319 8, 287 8, 273 7, 345 7, 272 8, 438 8, 430 5, 430 5, 370 8, 360 8;
+                        glyphs: "checkbutton";
                         offset: 0 15;
                       }
                       transform: translate(24, 0);
@@ -847,7 +847,7 @@ transform {
                       child: text {
                         color: rgb(212,207,202);
                         font: "Cantarell 11";
-                        glyphs: 273 7, 319 8, 287 8, 273 7, 345 7, 272 8, 438 8, 430 5, 430 5, 370 8, 360 8;
+                        glyphs: "checkbutton";
                         offset: 0 15;
                       }
                       transform: translate(24, 0);
@@ -882,7 +882,7 @@ transform {
                       child: text {
                         color: rgb(212,207,202);
                         font: "Cantarell 11";
-                        glyphs: 273 7, 319 8, 287 8, 273 7, 345 7, 272 8, 438 8, 430 5, 430 5, 370 8, 360 8;
+                        glyphs: "checkbutton";
                         offset: 0 15;
                       }
                       transform: translate(24, 0);
@@ -912,7 +912,7 @@ transform {
                       child: text {
                         color: rgb(146,149,149);
                         font: "Cantarell 11";
-                        glyphs: 409 6, 244 8, 280 8, 324 4, 370 8, 272 8, 438 8, 430 5, 430 5, 370 8, 360 8;
+                        glyphs: "radiobutton";
                         offset: 0 15;
                       }
                       transform: translate(24, 0);
@@ -942,7 +942,7 @@ transform {
                       child: text {
                         color: rgb(146,149,149);
                         font: "Cantarell 11";
-                        glyphs: 409 6, 244 8, 280 8, 324 4, 370 8, 272 8, 438 8, 430 5, 430 5, 370 8, 360 8;
+                        glyphs: "radiobutton";
                         offset: 0 15;
                       }
                       transform: translate(24, 0);
@@ -980,7 +980,7 @@ transform {
                       child: text {
                         color: rgb(146,149,149);
                         font: "Cantarell 11";
-                        glyphs: 409 6, 244 8, 280 8, 324 4, 370 8, 272 8, 438 8, 430 5, 430 5, 370 8, 360 8;
+                        glyphs: "radiobutton";
                         offset: 0 15;
                       }
                       transform: translate(24, 0);
@@ -1018,7 +1018,7 @@ transform {
                       child: text {
                         color: rgb(212,207,202);
                         font: "Cantarell 11";
-                        glyphs: 409 6, 244 8, 280 8, 324 4, 370 8, 272 8, 438 8, 430 5, 430 5, 370 8, 360 8;
+                        glyphs: "radiobutton";
                         offset: 0 15;
                       }
                       transform: translate(24, 0);
@@ -1048,7 +1048,7 @@ transform {
                       child: text {
                         color: rgb(212,207,202);
                         font: "Cantarell 11";
-                        glyphs: 409 6, 244 8, 280 8, 324 4, 370 8, 272 8, 438 8, 430 5, 430 5, 370 8, 360 8;
+                        glyphs: "radiobutton";
                         offset: 0 15;
                       }
                       transform: translate(24, 0);
@@ -1086,7 +1086,7 @@ transform {
                       child: text {
                         color: rgb(212,207,202);
                         font: "Cantarell 11";
-                        glyphs: 409 6, 244 8, 280 8, 324 4, 370 8, 272 8, 438 8, 430 5, 430 5, 370 8, 360 8;
+                        glyphs: "radiobutton";
                         offset: 0 15;
                       }
                       transform: translate(24, 0);
@@ -1154,7 +1154,7 @@ transform {
                   text {
                     color: rgb(146,149,149);
                     font: "Cantarell 11";
-                    glyphs: 430 5, 370 8, 312 8, 312 8, 349 4, 287 8, 272 8, 438 8, 430 5, 430 5, 370 8, 360 8;
+                    glyphs: "togglebutton";
                     offset: 2 17;
                   }
                 }
@@ -1176,7 +1176,7 @@ transform {
                   text {
                     color: rgb(212,207,202);
                     font: "Cantarell 11";
-                    glyphs: 430 5, 370 8, 312 8, 312 8, 349 4, 287 8, 272 8, 438 8, 430 5, 430 5, 370 8, 360 8;
+                    glyphs: "togglebutton";
                     offset: 2 17;
                   }
                 }
@@ -1198,7 +1198,7 @@ transform {
                   text {
                     color: rgb(146,149,149);
                     font: "Cantarell 11";
-                    glyphs: 430 5, 370 8, 312 8, 312 8, 349 4, 287 8, 272 8, 438 8, 430 5, 430 5, 370 8, 360 8;
+                    glyphs: "togglebutton";
                     offset: 2 17;
                   }
                 }
@@ -1220,7 +1220,7 @@ transform {
                   text {
                     color: rgb(212,207,202);
                     font: "Cantarell 11";
-                    glyphs: 430 5, 370 8, 312 8, 312 8, 349 4, 287 8, 272 8, 438 8, 430 5, 430 5, 370 8, 360 8;
+                    glyphs: "togglebutton";
                     offset: 2 17;
                   }
                 }
@@ -1244,7 +1244,7 @@ transform {
                       text {
                         color: rgb(146,149,149);
                         font: "Cantarell 11";
-                        glyphs: 1 10, 360 8, 280 8, 409 6, 287 8, 244 8;
+                        glyphs: "Andrea";
                         offset: 2 17;
                       }
                       transform {
@@ -1282,7 +1282,7 @@ transform {
                       text {
                         color: rgb(212,207,202);
                         font: "Cantarell 11";
-                        glyphs: 126 11, 430 5, 430 5, 370 8;
+                        glyphs: "Otto";
                         offset: 2 17;
                       }
                       transform {
@@ -1320,7 +1320,7 @@ transform {
                       text {
                         color: rgb(146,149,149);
                         font: "Cantarell 11";
-                        glyphs: 173 9, 244 8, 360 8, 417 7, 862 3, 165 9, 287 8, 312 8, 438 8, 349 4, 244 8, 409 6;
+                        glyphs: "Sans Regular";
                         offset: 0 17;
                       }
                       transform {
@@ -1328,7 +1328,7 @@ transform {
                           child: text {
                             color: rgb(146,149,149);
                             font: "Cantarell Bold 11";
-                            glyphs: 678 7, 679 8;
+                            glyphs: "12";
                             offset: 0 17;
                           }
                           transform: translate(1, 0);
@@ -1392,7 +1392,7 @@ transform {
                         child: text {
                           color: rgb(146,149,149);
                           font: "Cantarell 11";
-                          glyphs: 822 4, 115 11, 370 8, 360 8, 287 8, 823 4;
+                          glyphs: "(None)";
                           offset: 0 17;
                         }
                         transform: translate(16, 0);
@@ -1419,7 +1419,7 @@ transform {
                   text {
                     color: rgb(53,132,228);
                     font: "Cantarell 11";
-                    glyphs: 349 4, 324 4, 360 8, 345 7, 862 3, 272 8, 438 8, 430 5, 430 5, 370 8, 360 8;
+                    glyphs: "link button";
                     offset: 10 17;
                   }
                   color {
@@ -1573,7 +1573,7 @@ transform {
                       child: text {
                         color: rgba(46,52,54,0.4);
                         font: "Cantarell 9.1669921875";
-                        glyphs: 682 7, 677 8, 859 1, 919 12;
+                        glyphs: "50", 859 1, "%";
                         offset: 0 13;
                       }
                       transform: translate(237, 0);
@@ -1965,7 +1965,7 @@ transform {
                           text {
                             color: rgba(146,149,149,0.55);
                             font: "Cantarell 11";
-                            glyphs: 682 8, 677 9, 805 4, 677 9;
+                            glyphs: "50.0";
                             offset: 26 15;
                           }
                           transform {
@@ -2021,7 +2021,7 @@ transform {
                           text {
                             color: rgba(146,149,149,0.55);
                             font: "Cantarell 11";
-                            glyphs: 682 8, 677 9, 805 4, 677 9;
+                            glyphs: "50.0";
                             offset: 26 15;
                           }
                           transform {
@@ -2086,7 +2086,7 @@ transform {
                   text {
                     color: rgb(146,149,149);
                     font: "Cantarell Bold 11";
-                    glyphs: 81 4, 360 8, 417 7, 287 8, 430 6;
+                    glyphs: "Inset";
                     offset: 0 15;
                   }
                 }
@@ -2101,7 +2101,7 @@ transform {
                   text {
                     color: rgb(146,149,149);
                     font: "Cantarell Bold 11";
-                    glyphs: 126 11, 438 8, 430 6, 417 7, 287 8, 430 6;
+                    glyphs: "Outset";
                     offset: 0 15;
                   }
                 }
@@ -2127,7 +2127,7 @@ transform {
                   text {
                     color: rgb(146,149,149);
                     font: "Cantarell Bold 11";
-                    glyphs: 69 11, 409 6, 370 8, 370 8, 466 7, 287 8;
+                    glyphs: "Groove";
                     offset: 0 15;
                   }
                 }
@@ -2153,7 +2153,7 @@ transform {
                   text {
                     color: rgb(146,149,149);
                     font: "Cantarell Bold 11";
-                    glyphs: 165 10, 324 4, 280 8, 312 8, 287 8;
+                    glyphs: "Ridge";
                     offset: 0 15;
                   }
                 }
@@ -2243,7 +2243,7 @@ transform {
                           text {
                             color: rgb(50,50,50);
                             font: "Cantarell 11";
-                            glyphs: 1 10, 360 8, 280 8, 409 6, 287 8, 244 8;
+                            glyphs: "Andrea";
                             offset: 86 42;
                           }
                           color {
@@ -2253,7 +2253,7 @@ transform {
                           text {
                             color: rgb(50,50,50);
                             font: "Cantarell 11";
-                            glyphs: 30 10, 324 4, 358 13, 324 4;
+                            glyphs: "Cimi";
                             offset: 157 42;
                           }
                           color {
@@ -2298,7 +2298,7 @@ transform {
                           text {
                             color: rgb(50,50,50);
                             font: "Cantarell 11";
-                            glyphs: 126 11, 430 5, 430 5, 370 8;
+                            glyphs: "Otto";
                             offset: 86 65;
                           }
                           color {
@@ -2308,7 +2308,7 @@ transform {
                           text {
                             color: rgb(50,50,50);
                             font: "Cantarell 11";
-                            glyphs: 273 7, 319 8, 244 8, 370 8, 430 5, 324 4, 273 7;
+                            glyphs: "chaotic";
                             offset: 157 65;
                           }
                           color {
@@ -2361,7 +2361,7 @@ transform {
                           text {
                             color: rgb(50,50,50);
                             font: "Cantarell 11";
-                            glyphs: 126 11, 409 6, 466 7, 324 4, 349 4, 349 4, 287 8;
+                            glyphs: "Orville";
                             offset: 86 88;
                           }
                           color {
@@ -2372,7 +2372,7 @@ transform {
                             text {
                               color: rgb(50,50,50);
                               font: "Cantarell 11";
-                              glyphs: 165 9, 287 8, 280 8, 287 8, 360 8;
+                              glyphs: "Reden";
                               offset: 157 88;
                             }
                             text {
@@ -2435,7 +2435,7 @@ transform {
                           text {
                             color: rgb(50,50,50);
                             font: "Cantarell 11";
-                            glyphs: 29 10, 287 8, 360 8, 341 4, 244 8, 358 13, 324 4, 360 8;
+                            glyphs: "Benjamin";
                             offset: 86 111;
                           }
                           color {
@@ -2446,7 +2446,7 @@ transform {
                             text {
                               color: rgb(50,50,50);
                               font: "Cantarell 11";
-                              glyphs: 30 10, 370 8, 358 13, 406 8;
+                              glyphs: "Comp";
                               offset: 157 111;
                             }
                             text {
@@ -2475,7 +2475,7 @@ transform {
                               text {
                                 color: rgb(146,149,149);
                                 font: "Cantarell Bold 11";
-                                glyphs: 30 9, 370 8, 370 8, 349 4;
+                                glyphs: "Cool";
                                 offset: 0 17;
                               }
                             }
@@ -2495,7 +2495,7 @@ transform {
                               text {
                                 color: rgb(146,149,149);
                                 font: "Cantarell Bold 11";
-                                glyphs: 81 4, 273 7, 370 8, 360 8;
+                                glyphs: "Icon";
                                 offset: 0 17;
                               }
                             }
@@ -2515,7 +2515,7 @@ transform {
                               text {
                                 color: rgb(146,149,149);
                                 font: "Cantarell Bold 11";
-                                glyphs: 115 11, 244 8, 358 13, 287 8;
+                                glyphs: "Name";
                                 offset: 0 17;
                               }
                             }
@@ -2535,7 +2535,7 @@ transform {
                               text {
                                 color: rgb(146,149,149);
                                 font: "Cantarell Bold 11";
-                                glyphs: 115 11, 324 4, 273 7, 345 8;
+                                glyphs: "Nick";
                                 offset: 0 17;
                               }
                             }
@@ -2610,7 +2610,7 @@ transform {
                             child: text {
                               color: rgb(146,149,149);
                               font: "Cantarell Bold 11";
-                              glyphs: 406 8, 244 8, 312 8, 287 8, 862 3, 680 8;
+                              glyphs: "page 3";
                               offset: 0 20;
                             }
                             transform: translate(149, 0) translate(16, 3);
@@ -2619,7 +2619,7 @@ transform {
                             child: text {
                               color: rgb(146,149,149);
                               font: "Cantarell Bold 11";
-                              glyphs: 406 8, 244 8, 312 8, 287 8, 862 3, 679 8;
+                              glyphs: "page 2";
                               offset: 0 20;
                             }
                             transform: translate(74, 0) translate(16, 3);
@@ -2635,7 +2635,7 @@ transform {
                               text {
                                 color: rgb(146,149,149);
                                 font: "Cantarell Bold 11";
-                                glyphs: 406 8, 244 8, 312 8, 287 8, 862 3, 678 7;
+                                glyphs: "page 1";
                                 offset: 0 20;
                               }
                             }
@@ -2686,7 +2686,7 @@ transform {
                             child: text {
                               color: rgb(146,149,149);
                               font: "Cantarell Bold 11";
-                              glyphs: 406 8, 244 8, 312 8, 287 8, 862 3, 680 8;
+                              glyphs: "page 3";
                               offset: 0 20;
                             }
                             transform: translate(0, 88) translate(12, 7);
@@ -2695,7 +2695,7 @@ transform {
                             child: text {
                               color: rgb(146,149,149);
                               font: "Cantarell Bold 11";
-                              glyphs: 406 8, 244 8, 312 8, 287 8, 862 3, 679 8;
+                              glyphs: "page 2";
                               offset: 0 20;
                             }
                             transform: translate(0, 44) translate(12, 7);
@@ -2711,7 +2711,7 @@ transform {
                               text {
                                 color: rgb(146,149,149);
                                 font: "Cantarell Bold 11";
-                                glyphs: 406 8, 244 8, 312 8, 287 8, 862 3, 678 7;
+                                glyphs: "page 1";
                                 offset: 0 20;
                               }
                             }
@@ -2755,7 +2755,7 @@ transform {
                             child: text {
                               color: rgb(146,149,149);
                               font: "Cantarell Bold 11";
-                              glyphs: 406 8, 244 8, 312 8, 287 8, 862 3, 680 8;
+                              glyphs: "page 3";
                               offset: 0 20;
                             }
                             transform: translate(149, 0) translate(16, 4);
@@ -2764,7 +2764,7 @@ transform {
                             child: text {
                               color: rgb(146,149,149);
                               font: "Cantarell Bold 11";
-                              glyphs: 406 8, 244 8, 312 8, 287 8, 862 3, 679 8;
+                              glyphs: "page 2";
                               offset: 0 20;
                             }
                             transform: translate(74, 0) translate(16, 4);
@@ -2780,7 +2780,7 @@ transform {
                               text {
                                 color: rgb(146,149,149);
                                 font: "Cantarell Bold 11";
-                                glyphs: 406 8, 244 8, 312 8, 287 8, 862 3, 678 7;
+                                glyphs: "page 1";
                                 offset: 0 20;
                               }
                             }
@@ -2820,7 +2820,7 @@ transform {
                             child: text {
                               color: rgb(146,149,149);
                               font: "Cantarell Bold 11";
-                              glyphs: 406 8, 244 8, 312 8, 287 8, 862 3, 680 8;
+                              glyphs: "page 3";
                               offset: 0 20;
                             }
                             transform: translate(0, 88) translate(12, 7);
@@ -2829,7 +2829,7 @@ transform {
                             child: text {
                               color: rgb(146,149,149);
                               font: "Cantarell Bold 11";
-                              glyphs: 406 8, 244 8, 312 8, 287 8, 862 3, 679 8;
+                              glyphs: "page 2";
                               offset: 0 20;
                             }
                             transform: translate(0, 44) translate(12, 7);
@@ -2845,7 +2845,7 @@ transform {
                               text {
                                 color: rgb(146,149,149);
                                 font: "Cantarell Bold 11";
-                                glyphs: 406 8, 244 8, 312 8, 287 8, 862 3, 678 7;
+                                glyphs: "page 1";
                                 offset: 0 20;
                               }
                             }